<template>
  <view class="ver-layout">
    <view class="top-layout ver-layout">
      <view class="title">Calculator</view>
      <view class="content">{{ content }}</view>
      <!--  表单页面    -->
      <view class="ver-layout">
        <u-cell-group :border="false" class="form-layout">
          <u-cell title="选择平台"
                  :isLink="true" arrow-direction="down"
                  :value="picker1.value.label"
                  @click="picker1.show=true"></u-cell>
          <u-cell title="选择类型"
                  :isLink="true" arrow-direction="down"
                  :value="picker2.value.label"
                  @click="picker2.show=true"></u-cell>
          <u-cell title="输入数值">
            <u-input slot="value" placeholder="请输入金额" clearable></u-input>
          </u-cell>
        </u-cell-group>
        <u-cell-group :border="false" class="card-layout">
          <u-cell title="Total" value="N0">
            <view slot="value" style="font-weight: bolder;color: #3e3e65">N0</view>
          </u-cell>
          <u-cell title="Gift Card Value" value="N0" :border="false"></u-cell>
          <u-cell title="First Trading Rewards" value="N0" :border="false"></u-cell>
          <u-cell title="Fulfil-amount Rewards" value="N0" :border="false"></u-cell>
          <u-cell title="VIP Rewards" value="N0" :border="false"></u-cell>
        </u-cell-group>
      </view>
      <u-button style="margin: 30px 0px" size="large" type="warning" text="Sell Now for cash"
                @click="toPage(sellCard)"></u-button>
    </view>
    <u-picker :show="picker1.show" :columns="pickerColumns1" :closeOnClickOverlay="true" keyName="label"
              title="选择平台" :defaultIndex="picker1Index"
              @close="picker1.show=false" @cancel="picker1.show=false"
              @confirm="confirmSelect(1,$event)"></u-picker>
    <u-picker :show="picker2.show" :columns="pickerColumns2" :closeOnClickOverlay="true" keyName="label"
              title="选择平台" :defaultIndex="picker2Index"
              @close="picker2.show=false" @cancel="picker2.show=false"
              @confirm="confirmSelect(2,$event)"></u-picker>
  </view>
</template>

<script>
import {sellCard} from "@/router"

export default {
  name: "calculateValue",
  data() {
    return {
      sellCard,
      content: "Please enter the required information in each field below,we will calculate how much money you will get for the valid gift cards.",
      picker1: {
        show: false,
        value: {id: 2, label: 'Google'}
      },
      picker2: {
        show: false,
        value: {id: 2, label: 'Google'}
      },
      picker3: {
        show: false,
        value: {id: 2, label: 'Google'}
      },
      pickerColumns1: [[
        {id: 1, label: 'Steam'},
        {id: 2, label: 'Google'},
        {id: 3, label: 'Apple/iTunes'},
        {id: 4, label: 'Footlocker'},
        {id: 5, label: 'Nordstrom'},
        {id: 6, label: 'Amazon'},
        {id: 7, label: 'Sephora'},
        {id: 8, label: 'Ebay'},
        {id: 9, label: 'AMEX 3779'},
        {id: 10, label: 'Vanilla'},
        {id: 11, label: 'Cash app'},
        {id: 12, label: 'Macys'},
        {id: 13, label: 'Paypal'},
        {id: 14, label: 'Visa'},
        {id: 15, label: 'Nike'},
        {id: 16, label: 'Zelle transfer'},
        {id: 17, label: 'Razer Gold'},
        {id: 18, label: 'Xbox'},
        {id: 19, label: 'Best buy'},
        {id: 20, label: 'Bloomingdales'},
        {id: 21, label: 'CVS pharmacy'},
        {id: 22, label: 'JCpenney'},
        {id: 23, label: 'Saks Fifth Avenue'},
        {id: 24, label: 'Walmart'},
      ]],
      pickerColumns2: [[
        {id: 1, label: 'USD/1-49(include Ecode)'},
        {id: 2, label: 'USD/50-200(include Ecode)'},
        {id: 3, label: 'CAD/1-49(include Ecode)'},
        {id: 4, label: 'CAD/50-200(include Ecode)'},
      ]],
    }
  },
  computed: {
    picker1Index() {
      return [this.pickerColumns1[0].findIndex(item => this.picker1.value.id == item.id)]
    },
    picker2Index() {
      return [this.pickerColumns2[0].findIndex(item => this.picker2.value.id == item.id)]
    }
  },
  methods: {
    confirmSelect(idx, val) {
      if (idx == 1) this.picker1.show = false, this.picker1.value = val.value[0]
      if (idx == 2) this.picker2.show = false, this.picker2.value = val.value[0]
      if (idx == 3) this.picker3.show = false, this.picker3.value = val.value[0]
    }
  }
}
</script>

<style scoped lang="scss">
.top-layout {
  color: white;
  padding: 12px;
  background: linear-gradient(to bottom, #55BBB3 0%, #3bb2b8 100%);

  .title {
    margin-top: 20px;
    font-weight: bolder;
  }

  .content {
    margin-top: 20px;
    font-size: small;
  }
}

.form-layout {
  margin-top: 30px;
  border-radius: 7px;
  background: aliceblue;
  border: 1px solid #D1D1D1;
  box-shadow: 0 0 3px #d9d9d9;
}

.card-layout {
  margin: auto;
  margin-top: 20px;
  color: #666666;
  padding: 10px;
  width: calc(100% - 10 * 2px);
  background: aliceblue;
  border-radius: 10px;

  /deep/ .u-cell__title-text {
    font-weight: lighter;
  }
}
</style>
